<template>
    <ContentWrap>
        <CardTitle title="CardTitle 使用" />
        <code class="code-block mt-20px" >
            &lt;CardTitle title="基础标题" /&gt;<br/>
            &lt;CardTitle title="带图标的标题" icon="ep:star" /&gt;<br/>
            &lt;CardTitle title="自定义样式标题" :titleStyle="{ color: '#409EFF', fontSize: '18px' }" /&gt;
        </code>
        <CardTitle title="CardTitle 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
// 直接使用，可配置标题、图标等属性
&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="CardTitle 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>title</td> 
                    <td>String</td>
                    <td>-</td>
                    <td>标题文本</td>
                </tr>
                <tr>
                    <td>icon</td>
                    <td>String</td>
                    <td>-</td>
                    <td>标题前的图标</td>
                </tr>
                <tr>
                    <td>titleStyle</td>
                    <td>Object</td>
                    <td>-</td>
                    <td>标题样式</td>
                </tr>
            </tbody>
        </table>
        <CardTitle title="CardTitle 示例" />
       <div class="mt-20px">
            <div class="example-item">
                <CardTitle title="基础标题" />
                <p class="example-desc">这是一个基础的卡片标题示例</p>
            </div>
            
            <div class="example-item">
                <CardTitle title="带图标的标题" icon="ep:star" />
                <p class="example-desc">这是一个带图标的卡片标题示例</p>
            </div>
            
            <div class="example-item">
                <CardTitle title="自定义样式标题" :titleStyle="{ color: '#409EFF', fontSize: '18px' }" />
                <p class="example-desc">这是一个自定义样式的卡片标题示例</p>
            </div>
            
            <div class="example-item">
                <CardTitle title="重要提示" icon="ep:warning" :titleStyle="{ color: '#F56C6C' }" />
                <p class="example-desc">这是一个警告样式的卡片标题示例</p>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
// 直接使用，可配置标题、图标等属性
</script>

<style lang="scss" scoped>
.example-item {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    .example-desc {
        margin: 10px 0 0 0;
        color: #666;
        font-size: 14px;
        line-height: 1.5;
    }
}
</style> 